<template>
	<div>
		<div class="app-container">
      <div class="margin-b10 margin-t c-overflow-h">
				<div class="fl">
          <el-button v-if="permission==3" type="primary" icon="el-icon-edit"  @click="linkToCreate">创建社群</el-button>
          <el-button @click='handleCopy(url,$event)'>复制链接</el-button>
        </div>
				<el-form class="fr">
          <el-select class="width120" v-model="listQuery.status" clearable placeholder="请选择状态">
          <el-option
            v-for="item in isShelf"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
          </el-select>
					<el-select  class="width120" clearable v-model="listQuery.selectSort" placeholder="请选择分类">
					    <el-option
					      v-for="item in options"
					      :key="item.id"
					      :label="item.value"
					      :value="item.id">
					    </el-option>
					</el-select>
					<el-input v-model="listQuery.socialName" clearable placeholder="请输入社群名称" @keyup.enter.native="searchSocial" class="width300"></el-input>
					<el-button type="primary"  class="search" icon="el-icon-search"  @click="searchSocial">搜索</el-button>
		    </el-form>
			</div>
			<div>
				<el-table :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}" v-loading="listLoading" :data="tableData" row-key="id" fit highlight-current-row class="c-width100 color-222 family-PingFangSC-Regular font-s12">
				 	  <el-table-column align="center" label="社群名称" >
              <template slot-scope="scope">
                <div class="clearfix">
                  <div class="fl margin-r img"><img :src="scope.row.avatar" alt=""/></div>
                  <div class="fl">
                    <div class="font-s14 color-222 text-alignL">{{scope.row.name}}</div>
                    <div class="text-alignL">{{scope.row.price}}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="165" align="center" label="排序" >
              <template slot-scope="scope">
                <span>{{scope.row.sort}}</span>
              </template>
            </el-table-column>
            <!--<el-table-column width="150" align="center" label="价格（元）">-->
              <!--<template slot-scope="scope">-->
                <!--<span>{{scope.row.price}}</span>-->
              <!--</template>-->
				    <!--</el-table-column>-->
			      	<el-table-column width="100" align="center" label="是否上架">
				        <template slot-scope="scope">
				          <span v-if="scope.row.status == 1">是</span>
                  <span v-else>否</span>
				        </template>
				    </el-table-column>
				    <el-table-column width="100"  align="center" label="成员">
				        <template slot-scope="scope">
				          <span>{{scope.row.number}}</span>
				        </template>
				    </el-table-column>
				    <el-table-column width="100"  align="center" label="最大成员数">
				        <template slot-scope="scope">
				          <span>{{scope.row.maxNumber}}</span>
				        </template>
				    </el-table-column>
				    <el-table-column align="center" width="250" label="操作">
				        <template slot-scope="scope">
                 <div>
                   <b v-if="permission == 3" @click="linkToSetTeacher(scope.row.socialRoomId)">设置讲师</b>
                   <span class="color-409" v-if="permission == 3">|</span>
                   <!--<b @click="linkToManage(scope.row.socialRoomId)">管理</b>|-->
                   <router-link :to="{path:'/social/manageSocial/' + scope.row.socialRoomId}">
                     <b>管理</b>
                     <span class="color-409" v-if="permission == 3">|</span>
                   </router-link>
                   <b v-if="permission == 3" @click="linkToEdit(scope.row.socialRoomId)">编辑</b>
                 </div>
                  <div>
                    <b @click="handleCopy(scope.row.url,$event)">复制链接</b>
                    <span class="color-409" v-if="permission == 3">|</span>
                    <b @click="changeSocial(-1, '下架', scope.row.socialRoomId)" v-if="scope.row.status == 1 && permission == 3">下架</b>
                    <b @click="changeSocial(1, '上架', scope.row.socialRoomId)" v-else-if="scope.row.status == -1 && permission == 3">上架</b>
                    <span class="color-409" v-if="permission == 3">|</span>
                    <b v-if="permission == 3" @click="delSocial(scope.row.socialRoomId)">解散</b>
                  </div>
		            </template>
				    </el-table-column>
				   </el-table>
				<div class="block text-c">
					<!--分页组件 current-page:当前页   -->
					<!--   page-sizes:每页几条数据（选项）   -->
					<!--   page-size:每页几条数据   -->
					<!--   total:总条数   -->
				    <el-pagination
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      :current-page="listQuery.currentPage"
				      :page-sizes="[10, 20, 30, 40]"
				      :page-size="10"
				      layout="total, sizes, prev, pager, next, jumper"
				      :total="listQuery.total">
				    </el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import clip from '@/utils/clipboard' // use clipboard directly
import { getSocialLists, changeSocialStatus, deleteSocialRoom } from '@/api/social'
import { interaction_social } from '@/utils/permission'
export default {
  data() {
    return {
      permission: 3,
      listQuery: {
        currentPage: 1, // 当前页
        total: null, // 数据总条数
        page: 1,
        limit: 10,
        selectSort: null, // 搜索选择的分类
        socialName: null, // 搜索的社群名
        status: ''
      },
      url: null,
      status: null,
      listLoading: false, // 加载数据的时候显示动画
      options: [
        {
          id: 0,
          value: '全部'
        }, {
          id: 1,
          value: '免费'
        }, {
          id: 2,
          value: '收费'
        }
      ],
      isShelf: [
        {
          value: '1',
          label: '上架'
        }, {
          value: '-1',
          label: '下架'
        }
      ],
      tableData: []
    }
  },
  methods: {
    getModelPermission() {
      this.permission = interaction_social()
    },
    listenCall(methodsWords) {
      // 监听点击了哪个菜单
      console.log('methodsWords', methodsWords)
      this[methodsWords]() // 调用对应方法
    },
    handleCopy(text, event) {
      clip(text, event)
    },
    getSocialLists() {
      this.listLoading = true
      getSocialLists(this.listQuery).then(res => {
        this.listLoading = false
        this.tableData = res.data.data.socialRoom.data
        this.listQuery.total = res.data.data.socialRoom.total
        this.url = res.data.data.url
        console.log(res.data.data.socialRoom)
      }).catch(err => {
        console.log('1111')
        console.log(err)
      })
    },
    searchSocial() {
      this.getSocialLists()
    },
    linkToCreate() {
      this.$router.push({ path: `/social/create` })
    },
    linkToSetTeacher(id) {
      this.$router.push({ path: `/social/setTeacher/${id}` })
    },
    linkToManage(id) {
      this.$router.push({ path: `/social/manageSocial/${id}` })
    },
    linkToEdit(id) {
      this.$router.push({ path: `/social/edit/${id}` })
    },
    changeSocial(status, text, srId) {
      this.status = status
      console.log('srId: ' + srId)
      this.$confirm('确定' + text + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true
      }).then(() => {
        this.listLoading = true
        changeSocialStatus({ status: this.status }, srId).then(res => {
          this.listLoading = false
          this.$message({
            type: 'success',
            message: text + '成功!'
          })
          this.getSocialLists()
        }).catch(err => {
          this.listLoading = false
          console.log('1111')
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消' + text
        })
      })
    },
    delSocial(socialRoomId) {
      this.$confirm('确定解散该社群?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true
      }).then(() => {
        this.listLoading = true
        deleteSocialRoom(socialRoomId).then(res => {
          this.listLoading = false
          console.log(res.data)
          this.$message({
            type: 'success',
            message: '解散成功!'
          })
          this.getSocialLists()
        }).catch(err => {
          this.listLoading = false
          console.log('1111')
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消解散该社群'
        })
      })
    },
    handleSizeChange(val) { // 切换每页几条数据方法
      this.listQuery.limit = val
      this.getSocialLists()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) { // 切换当前页
      this.listQuery.page = val
      this.getSocialLists()
      console.log(`当前页: ${val}`)
    }
  },
  created() {
    this.getModelPermission()
  },
  mounted() {
    this.getSocialLists()
    this.listQuery.total = this.tableData.length
  }
}
</script>

<style scoped>
	.explain:hover{
		color: #0A76A4;
	}
	.explain{
		font-size: 12px;
		color: #666;
	}
</style>
